import * as React from 'react';
import {
  View,
  Text,
  Image,
  ImageBackground,
  TouchableNativeFeedback,
  TouchableWithoutFeedback,
  ScrollView,
  Dimensions,
} from 'react-native';
import Carousel from 'react-native-reanimated-carousel';
import ColorButton from 'react-native-cdy-baseui/components/ColorButton';
import BasePageV5 from 'react-native-cdy-baseui/components/BasePageV5';
import ImageConstants from '../resources/ImageConstants';
import Row from 'react-native-cdy-baseui/components/Row';
import AutoSizingImage from 'react-native-cdy-baseui/components/AutoSizingImage';
import HttpUtil from 'react-native-cdy-baseui/network/HttpUtil';
import ToastUtil from 'react-native-cdy-baseui/utils/ToastUtil';

import {
  responsiveNumber,
  responsiveNumberByHeight,
} from 'react-native-responsive-number/src/index';
import NewsDetailView from '../views/NewsDetailView';
import ModalViewUtil from 'react-native-cdy-baseui/utils/ModalViewUtil';
import ListPage from 'react-native-cdy-baseui/components/ListPage';
import Video from 'react-native-video';
import {SBImageItem} from '../views/SBImageItem';
import {PaginationItem} from '../views/PaginationItem';
import Animated, {
  Extrapolate,
  interpolate,
  useAnimatedStyle,
  useSharedValue,
} from 'react-native-reanimated';
import ImageCarousel from '../views/ImageCarousel';
import {VideoPlayer} from '../views/VideoPlayer';
class NewsPage extends BasePageV5 {
  constructor(props) {
    super(props);
    this.state = {data: [], index: 0, images: []};
  }

  async loadData() {
    try {
      const {data} = await HttpUtil.get(
        'stadium/electronicClassCardApi/api/electronicCardNewsListApi',
        {channelId: 'czxy'},
      );
      this.hideLoading(false);
      this.setState({data});
    } catch (e) {
      this.hideLoading(true);
      ToastUtil.show(e.message);
      requestAnimationFrame(() => {
        this.navigatePage('SettingPage');
      });
    }
  }

  updateData = async () => {
    if (this.state.index === 0) {
      try {
        const {data} = await HttpUtil.get(
          'stadium/electronicClassCardApi/api/electronicCardNewsListApi',
          {channelId: 'czxy'},
        );
        this.setState({data});
      } catch (e) {
        ToastUtil.show(e.message);
      }
    } else if (this.state.index === 2) {
      try {
        const {data} = await HttpUtil.get(
          'stadium/electronicExamModeApi/api/getElectronicClassDemeanourResourceListApi',
          {
            classroomId: HttpUtil.getItem('ROOM_INFO').laboratoryId,
            resourceType: 1,
            page: 1,
            limit: 999,
          },
        );
        this.setState({images: data.data});
      } catch (e) {
        ToastUtil.show(e.message);
      }
    } else {
    }
  };

  renderItem = ({item, index}) => {
    if (item.resourceType === 1) {
      return (
        <TouchableWithoutFeedback
          onPress={() => {
            ModalViewUtil.showFromCenter(
              <View
                style={{
                  width: Dimensions.get('screen').width * 0.8,
                  height: Dimensions.get('screen').height * 0.9,
                  backgroundColor: 'white',
                  borderRadius: 20,
                  overflow: 'hidden',
                }}
              />,
            );
          }}>
          <View
            style={{
              width: '30%',
              marginLeft: '3%',
              marginTop: '2%',
              height: 150,
              borderRadius: 10,
              overflow: 'hidden',
            }}>
            <Image
              source={{uri: item.nodePath}}
              style={{width: '100%', height: '100%'}}
              resizeMode={'contain'}
            />
          </View>
        </TouchableWithoutFeedback>
      );
    } else {
      console.log('item.nodePath:', item.nodePath);
      return (
        <TouchableWithoutFeedback
          onPress={() => {
            ModalViewUtil.showFromCenter(
              <VideoPlayer nodePath={item.nodePath} />,
              true,
            );
          }}>
          <View
            style={{
              width: '30%',
              marginLeft: '2.5%',
              alignItems: 'stretch',
              marginBottom: 10,
              borderWidth: 1,
              marginTop: responsiveNumberByHeight(8),
              borderRadius: 15,
              borderColor: '#aaa',
              overflow: 'hidden',
            }}>
            <Image
              source={{uri: item.imgUrl}}
              style={{
                width: '80%',
                alignSelf: 'center',
                height: 150,
                marginVertical: 10,
              }}
              resizeMode={'contain'}
            />
            <View
              style={{
                justifyContent: 'flex-start',
                alignItems: 'stretch',
                backgroundColor: '#6FC5C3',
                padding: 10,
                flex: 1,
              }}>
              <Text
                style={{
                  fontSize: responsiveNumber(5),
                  color: 'white',
                }}
                numberOfLines={2}>
                {item.resourceName}
              </Text>
            </View>
          </View>
        </TouchableWithoutFeedback>
      );
    }
  };

  renderContent() {
    console.log('this.state.data:', this.state.data);
    return (
      <View
        style={{
          flex: 1,
          alignItems: 'stretch',
          backgroundColor: 'white',
        }}>
        <Image
          source={ImageConstants.IMG_BCG}
          style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%',
          }}
        />
        <Image
          source={ImageConstants.IMG_SHADOW}
          style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%',
          }}
        />
        <View
          style={{
            width: '90%',
            marginTop: '13%',
            marginHorizontal: '5%',
            flexDirection: 'row',
          }}>
          <View
            style={{
              width: '20%',
              alignItems: 'flex-end',
              justifyContent: 'space-between',
            }}>
            <TouchableWithoutFeedback
              onPress={() => this.setState({index: 0}, this.updateData)}>
              <View
                style={{
                  backgroundColor: this.state.index === 0 ? '#75C399' : 'white',
                  width: '100%',
                  flex: 1,
                  borderRadius: 20,
                  marginBottom: '10%',
                  justifyContent: 'center',
                  alignItems: 'center',
                }}>
                <Text
                  style={{
                    color: this.state.index === 0 ? 'white' : '#6FC5C3',
                    fontSize: 30,
                    fontWeight: 'bold',
                  }}>
                  新闻
                </Text>
                <Text
                  style={{
                    fontSize: 15,
                    fontWeight: 'bold',
                    marginTop: 10,
                    color: this.state.index === 0 ? 'white' : '#999',
                  }}>
                  NEWS
                </Text>
              </View>
            </TouchableWithoutFeedback>
            <TouchableWithoutFeedback
              onPress={() => this.setState({index: 1}, this.updateData)}>
              <View
                style={{
                  backgroundColor: this.state.index === 1 ? '#75C399' : 'white',
                  width: '100%',
                  flex: 1,
                  borderRadius: 20,
                  marginBottom: '10%',
                  justifyContent: 'center',
                  alignItems: 'center',
                }}>
                <Text
                  style={{
                    color: this.state.index === 1 ? 'white' : '#6FC5C3',
                    fontSize: 30,
                    fontWeight: 'bold',
                  }}>
                  视频
                </Text>
                <Text
                  style={{
                    fontSize: 15,
                    fontWeight: 'bold',
                    marginTop: 10,
                    color: this.state.index === 1 ? 'white' : '#999',
                  }}>
                  VIDEO
                </Text>
              </View>
            </TouchableWithoutFeedback>
            <TouchableWithoutFeedback
              onPress={() => this.setState({index: 2}, this.updateData)}>
              <View
                style={{
                  backgroundColor: this.state.index === 2 ? '#75C399' : 'white',
                  width: '100%',
                  flex: 1,
                  borderRadius: 20,
                  justifyContent: 'center',
                  alignItems: 'center',
                }}>
                <Text
                  style={{
                    color: this.state.index === 2 ? 'white' : '#6FC5C3',
                    fontSize: 30,
                    fontWeight: 'bold',
                  }}>
                  图片
                </Text>
                <Text
                  style={{
                    fontSize: 15,
                    fontWeight: 'bold',
                    marginTop: 10,
                    color: this.state.index === 2 ? 'white' : '#999',
                  }}>
                  PICTURE
                </Text>
              </View>
            </TouchableWithoutFeedback>
          </View>
          <View
            style={{width: '75%', marginLeft: '2.5%'}}
            onLayout={event =>
              this.setState({width: event.nativeEvent.layout.width})
            }>
            <AutoSizingImage
              source={ImageConstants.IMG_SUPERVISION_BCG}
              resizeMode="contain"
              style={{
                width: '100%',
                alignItems: 'stretch',
              }}>
              {this.state.index === 0 ? (
                <ScrollView style={{width: '100%'}}>
                  <View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
                    {this.state.data.map(value => {
                      console.log('value:', value);
                      return (
                        <TouchableWithoutFeedback
                          onPress={() => {
                            ModalViewUtil.showFromCenter(
                              <NewsDetailView
                                title={value.newsName}
                                image={value.imgUrl}
                                detail={value.newsContent}
                              />,
                            );
                          }}>
                          <View
                            style={{
                              width: '30%',
                              marginLeft: '2.5%',
                              alignItems: 'stretch',
                              marginBottom: 10,
                              borderWidth: 1,
                              marginTop: responsiveNumberByHeight(8),
                              borderRadius: 15,
                              borderColor: '#aaa',
                              overflow: 'hidden',
                            }}>
                            <Image
                              source={{uri: value.imgUrl.replace('sxt.', 't.')}}
                              style={{
                                width: '80%',
                                alignSelf: 'center',
                                height: 150,
                                marginVertical: 10,
                              }}
                              resizeMode={'contain'}
                            />
                            <View
                              style={{
                                justifyContent: 'flex-start',
                                alignItems: 'stretch',
                                backgroundColor: '#6FC5C3',
                                padding: 10,
                                flex: 1,
                              }}>
                              <Text
                                style={{
                                  fontSize: responsiveNumber(5),
                                  color: 'white',
                                }}
                                numberOfLines={2}>
                                {value.newsName}
                              </Text>
                            </View>
                          </View>
                        </TouchableWithoutFeedback>
                      );
                    })}
                  </View>
                </ScrollView>
              ) : null}
              {this.state.index === 1 ? (
                <View style={{width: '100%', height: '100%'}}>
                  <ListPage
                    url={
                      'stadium/electronicExamModeApi/api/getElectronicClassDemeanourResourceListApi'
                    }
                    params={{
                      classroomId: HttpUtil.getItem('ROOM_INFO').laboratoryId,
                      resourceType: 0,
                    }}
                    renderItem={this.renderItem}
                    requestMethod={'POST'}
                    dataKey={'data'}
                    refreshableMode="basic"
                    numColumns={3}
                  />
                </View>
              ) : null}
              {this.state.index === 2 ? (
                <ImageCarousel
                  width={this.state.width}
                  height={'100%'}
                  loop
                  vertical={false}
                  pagingEnabled={true}
                  snapEnabled={true}
                  autoPlay={true}
                  autoPlayInterval={10000}
                  data={this.state.images}
                  renderItem={({item}) => <SBImageItem url={item.nodePath} />}
                />
              ) : null}
            </AutoSizingImage>
          </View>
        </View>
      </View>
    );
  }
}

export default NewsPage;
